import React, { useEffect, useState } from 'react';
import Modal from 'react-modal';
import styled from './index.less';

const customStyles = {
  overlay: {
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
  },
  content: {
    top: '50%',
    left: '50%',
    right: 'auto',
    bottom: 'auto',
    marginRight: '-50%',
    transform: 'translate(-50%, -50%)',
    backgroundColor: '#2E2F30',
    borderColor: 'rgba(0, 0, 0, 1)',
  },
};

Modal.setAppElement('body');
function EditorUtil({ isClose, children }) {
  const [modalIsOpen, setIsOpen] = useState(false);
  const openModal = () => {
    setIsOpen(true);
  };
  const closeModal = () => {
    setIsOpen(false);
  };

  useEffect(() => {
    if (isClose) {
      setIsOpen(false);
    }
  }, [isClose]);

  return (
    <div>
      <div className={styled.buttonStyle} onClick={openModal}>
        编辑
      </div>
      <Modal isOpen={modalIsOpen} style={customStyles} onRequestClose={closeModal} contentLabel="编辑">
        <div className={styled.modalBox}>{children && React.cloneElement(children, { closeModal })}</div>
      </Modal>
    </div>
  );
}
export default EditorUtil;
